<template>
	<view :style="{ '--color': color }" class="p-bot150">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :Back="false" :bgMake="5" :Color="2" title="会员中心"></navBar>
		<!-- #endif -->
		<view class="Vipoptions">
			<u-tabs
				:list="pageData"
				:current="current"
				:lineColor="color"
				:itemStyle="itemStyle"
				:lineWidth="24"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
				:scrollable="false"
				keyName="vip_content"
				@click="click"
			></u-tabs>
		</view>

		<view class="rows m-top20" v-if="pageData.length">
			<view class="rows" v-for="(item, index) in pageData" :key="index">
				<u-parse :content="pageData[current].content" :domain="imgUrl" @ready="Load = false" v-if="current == index"></u-parse>
			</view>
			<!-- <view class="rows" v-show="current == 0">
				<u-parse :content="pageData[0].content" :domain="imgUrl" @ready="Load = false"></u-parse>
			</view>
			<view class="rows" v-show="current == 1">
				<u-parse :content="pageData[1].content" :domain="imgUrl"></u-parse>
			</view> -->
		</view>

		<view class="liberal_View">
			<view class="liberal d-flex a-center j-centert white" @click="playVip">
				<view class="d-flex f-column a-center" v-if="is_buy">
					<view class="d-flex a-center white size26">
						<text>立即续费{{ liberal_Txt }}</text>
						<text class="h6 m-top4">￥</text>
						<text class="size28">{{ liberal_price }}</text>
					</view>
					<text class="white h7">有效期至 {{ pageData[current].expire_at }}</text>
				</view>
				<block v-else>
					<text class="size34">{{ liberal_Txt }}</text>
					<text class="h6 m-top4">￥</text>
					<text class="size34">{{ liberal_price }}</text>
				</block>
			</view>
		</view>
		<Load v-if="Load"></Load>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		navBar
	},
	data() {
		return {
			Load: true,
			imgUrl: this.imgUrl,
			list1: [
				{
					name: '月卡会员'
				},
				{
					name: '年卡会员'
				}
			],
			current: 0,
			itemStyle: {
				height: '36px'
			},
			activeStyle: {
				fontWeight: 'bold',
				fontSize: '30rpx',
				transform: 'scale(1.04)'
			},
			inactiveStyle: {
				transform: 'scale(1)',
				fontSize: '30rpx'
			},

			pageData: [],
			palyState: true
		};
	},
	onLoad() {
		this.activeStyle['color'] = this.color;
	},
	onShow() {
		this.buyVipList();
		// #ifdef H5
		let param = `share_v_id=${this.vid}`;
		this.$H5Share(param);
		// #endif
	},
	methods: {
		buyVipList() {
			this.$http
				.get({
					url: '/goodsLessonsApi/buyVipList'
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					this.pageData = res.data;
				});
		},
		click(e) {
			this.current = e.index;
		},

		playVip() {
			let that = this;
			if (!that.palyState) return;
			that.palyState = false;
			that.$http
				.get({
					url: '/accountPay/getVipPayInfo',
					data: {
						vip_id: that.pageData[that.current].vip_id
					}
				})
				.then((res) => {
					if (res.code != '100') return (that.palyState = true);
					const result = res.data;
					// #ifdef MP-WEIXIN
					that.$pop.getPayment(result).then((pay) => {
						that.buyVipList();
					});
					// #endif
					// #ifdef H5
					window.location.href = that.palyUrl + result;
					// #endif
					that.palyState = true;
				});
		}
	},
	computed: {
		...mapState(['color', 'share', 'vid']),
		liberal_Txt() {
			if (!this.pageData.length) return;
			return `${this.pageData[this.current].vip_content}：`;
		},
		liberal_price() {
			if (!this.pageData.length) return;
			return `${this.pageData[this.current].vip_price}`;
		},
		is_buy() {
			if (!this.pageData.length) return;
			return this.pageData[this.current].is_buy == 1 ? true : false;
		}
	},
	onShareAppMessage() {
		let share = this.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/startUp/startUp?share_v_id=${this.vid}`,
			imageUrl: share.imageUrl
		};
	}
};
</script>
<style lang="scss">
page {
	background-color: $pageBg;
}
</style>
<style lang="scss" scoped>
.Vipoptions {
	width: 700rpx;
	margin: 0 auto;
	height: 80rpx;
}

.liberal_View {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 150rpx;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.liberal {
	color: #ffffff;
	width: 600rpx;
	height: 80rpx;
	border-radius: 40rpx;
	overflow: hidden;
	background-color: var(--color);
	z-index: 100;
}

// #ifdef MP-WEIXIN
.liberal {
	bottom: 40rpx;
}

// #endif
// #ifdef H5
.liberal {
	bottom: 140rpx;
}

// #endif
</style>
